<script setup>
  import {ref, reactive, onMounted, onUnmounted} from 'vue';
  import { ElMessageBox, ElNotification} from "element-plus";
  import router from '@/router';
  import {delStorage, getStorage} from "@/utils/localStorage.js";


  /* 变量定义开始 */
  //当前选择的菜单
  const activeIndex = ref('/mainView2');
  //用户信息
  const userInfo = reactive({
    user: {},
    menus: []
  })
  /* 变量定义结束 */


  /* 函数开始 */
  //菜单点击事件
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
  }

  //获取用户的登录信息
  const getUserInfo = () => {
    let userData = JSON.parse(getStorage("userInfo"));
    userInfo.user = userData.user; //用户基本信息
    userInfo.menus = userData.menus; //用户的可见菜单 不同的用户有不同的菜单
  }


  //用户退出登录
  const logout = () => {
    ElMessageBox.confirm(
        '请问您是否退出登录',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '点错了',
          type: 'warning',
        }
    )
        .then(() => {
          //执行登出
          doLogout().then(res => {
            if (res != -1) {
              //退出成功
              //1.提示用户
              ElNotification({
                title: '提示',
                message: '退出登录成功',
                type: 'warning',
              })
              //2.清除浏览器保存的用户信息
              delStorage("userInfo");
              delStorage("Token");
              //3.跳转到登录页面
              router.push("/login")
            }
          })
        })

}
/* 函数结束 */

//程序加载时的钩子函数
  onMounted(() => {
    getUserInfo();
  });
</script>

<template>
  <el-container class="layout-container">
    <el-header class="home-header">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
               background-color="rgb(48,65,86)" text-color="#fff" active-text-color="#ffd04b"
               @select="handleSelect" router>
        <span class="el-menu-item system-title">家校通信息门户系统</span>
        <el-menu-item v-for="(item, index) in userInfo.menus" :key="index" :index="item.path">
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          {{item.title}}
        </el-menu-item>
        <div class="flex-grow" />
        <span class="el-menu-item home-welcome">欢迎{{userInfo.user.username}},
						{{userInfo.user.userType == $ ? "同学" : "老师"}}你好</span>
        <el-menu-item @click="logout">退出登录</el-menu-item>
      </el-menu>
    </el-header>
    <el-main class="el-main-class">

      <router-view></router-view>

    </el-main>
      <el-footer>孜孜不倦默默无闻,写不出码要崩溃队</el-footer>
    </el-container>
</template>

<style lang="scss" scoped>
.el-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 15px;
  padding-top: 965px;
}
.home-header {
  padding: 0px;
}

.system-title {
  color: white;
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 3px;
}

.home-welcome {
  color: white;
}

.flex-grow {
  flex-grow: 1;
}
.el-main-class{
  padding: 0px;
}
</style>